<!--找活-->
<template>
	<view class="look-jop-overview">
		<view class="look-jop-top">
			<view class="look-jop-search" @click="getJopSearch">
				<image class="image-search" src="@/static/image/searchimg.png" />
				<input type="text" placeholder="木工" placeholder-class="placeholder-input" disabled="false" />
			</view>
			<view class="look-jop-menu">
				<view class="look-jop-menu-item" v-for="(item,index) in menuList" :key="index" @click="getJopSort(item)">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="content">
			<you-scroll ref="scroll" :fetch="getJopData">
				<view class="look-jop-item" slot-scope="{row,index}" @click="getJopDetail(row,index)">
					<job-list-item :item="row"></job-list-item>
				</view>
			</you-scroll>
		</view>
	</view>
</template>
<script>
	import {
		getJobList
	} from '@/static/js/api/jop.js';
	import request from '@/static/js/request.js'
	import JobListItem from './components/JobListItem.vue'
	import youScroll from '@/components/uni-list-scroll/you-scroll'
	export default {
		components: {
			JobListItem,
			youScroll,
			
		},
		data() {
			return {
				menuList: [{
						name: "班组",

					},
					{
						name: "企业",

					},
					{
						name: "全部分类",
					}
				],

			}
		},
		onLoad(option) {

		},
		mounted() {
			this.$refs.scroll.loadData();
		},
		methods: {
			getJopData(pageIndex, pageSize) {
				return getJobList(pageIndex, pageSize).then(res => {
					res.data = res.data.map((m) => {
						if (m.recruitment_type == "企业") {
							return {
								...m,

								color: "#2E68DB"
							}
						} else if (m.recruitment_type == "个人") {
							return {
								...m,

								color: "#22D09E"
							}
						} else if (m.recruitment_type == "班组") {
							return {
								...m,

								color: "#2EB1DB"
							}
						}
					})
					console.log(res.data)
					return res.data;
				})
			},
			getJopSort(item) {
				uni.navigateTo({
					url: `/pages/home/job/GetJobSort?select=${item.name}`,
				})
			},
			getJopSearch() {
				uni.navigateTo({
					url: "/pages/home/job/GetJopSearch"
				})
			},
			getJopDetail(item, index) {
				let isVerified = uni.getStorageSync('isVerified');
				if (!isVerified) {
					uni.showModal({
						title: '提示',
						content: '请先完成实名认证',
						success(r) {
							if (r.confirm) {
								uni.navigateTo({
									url: '/pages/main/mine/MineRegisterIdentity'
								})
							}
						}
					})
					return;
				}
				uni.navigateTo({
					url: `/pages/home/job/GetJopDetail?id=${item.id}`
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.look-jop-overview {
		overflow: hidden;
		height: 100vh;
		background: #F4F5F9;

		.look-jop-top {
			display: flex;
			text-align: center;
			align-items: center;
			padding: 40rpx 22rpx;
			background: #FFFFFF;

			.look-jop-search {
				width: 226rpx;
				height: 60rpx;
				display: flex;
				text-align: left;
				align-items: center;

				.image-search {
					width: 44rpx;
					height: 44rpx;
					margin-right: 12rpx;
				}

				&>input {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}

				.placeholder-input {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}
			}

			.look-jop-menu {
				margin-left: 30rpx;
				width: 394rpx;
				padding: 0rpx 30rpx;
				height: 80rpx;
				background: #EFF0F1;
				border-radius: 40rpx;
				display: flex;
				text-align: center;
				align-items: center;

				.look-jop-menu-item {
					flex: 0 0 34%;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
			}
		}

		.content {
			height: calc(100vh - 160rpx);

			.look-jop-item {
				background: #FFFFFF;
				margin-bottom: 20rpx;
				padding-top: 32rpx;
				padding-bottom: 12rpx;
			}
		}
		.authorize {
		
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 40rpx 26rpx 44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		
			.auth-icon {
				width: 66rpx;
				height: 76rpx;
				margin-bottom: 12rpx;
			}
		
			.auth-title {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
			}
		
			.auth-content {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}
		
			.line {
		
				height: 2rpx;
				background: #EEEEEE;
				width: 100%;
				margin: 22rpx 0;
			}
		
			.auth-btn {
				margin-top: 38rpx;
				width: 300rpx;
				height: 68rpx;
				background: #B8212B;
				border-radius: 2rpx;
				border: 2rpx solid #B8212B;
				line-height: 68rpx;
				font-size: 28rpx;
		
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
